<!--
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/
-->
<ng-template #templateRef>
	<div
		class="grid-stack-item"
		attr.data-card-guid="{{guid}}"
		attr.gs-w="{{width}}"
		attr.gs-h="{{height}}"
		attr.gs-x="{{x}}"
		attr.gs-y="{{y}}"
	>
		<div
			#item
			class="grid-stack-item-content notebook-cell"
		>
			<div class="grid-stack-content-wrapper">
				<div class="grid-stack-header" ></div>
				<div class="grid-stack-content-wrapper-inner">
					<!--<div #actionbar [style.display]="showActionBar ? 'block' : 'none'" class="actionbar"></div>-->
					<panel (onTabChange)="handleTabChange($event)" (onTabClose)="handleTabClose($event)">
						<tab [visibilityType]="'visibility'" *ngFor="let tab of tabs" [title]="tab.title" class="fullsize" [identifier]="tab.id" [type]="'tab'" [canClose]="true">
							<ng-template>
								<ng-container>
									<div #container class="card-container">
										<div *ngIf="tab.cellModel !== undefined">
											<views-code-cell-component *ngIf="tab.cellModel.cellType === 'code'" [cellModel]="tab.cellModel" [model]="model" [activeCellId]="tab.cellModel.id" [visible]="visible">
											</views-code-cell-component>
											<text-cell-component *ngIf="tab.cellModel.cellType === 'markdown'" [cellModel]="tab.cellModel" [model]="model" [activeCellId]="tab.cellModel.id">
											</text-cell-component>
										</div>
									</div>
								</ng-container>
							</ng-template>
						</tab>
					</panel>
				</div>
				<div class="grid-stack-footer"></div>
			</div>
		</div>
	</div>
</ng-template>
